<script setup>
//  按需引入 echarts
import * as echarts from "echarts";

const dom = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(() => {
	initECharts();
});

const initECharts = () => {
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(dom.value, null, {
		width: 310 * 2,
		height: 200 * 2,
	});
	// 指定图表的配置项和数据
	var option = {
		xAxis: {
			data: ["2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"],
		},
		yAxis: {},
		series: [
			{
				type: "candlestick",
				data: [
					[20, 34, 10, 38],
					[40, 35, 30, 50],
					[31, 38, 33, 44],
					[38, 15, 5, 42],
				],
			},
		],
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
};
</script>

<template>
	<div ref="dom"></div>
</template>
